<template>
    <div class="container">
        <el-row class="row">
            <el-button style="width: 750px;" type="primary" size="large" @click="showClassAttendance = true">
                班级考勤
            </el-button>
            <el-dialog v-model="showClassAttendance" width="1000" title="班级考勤">
                <el-select placeholder="请选择班级" v-model="selectedClass">
                    <el-option v-for="classInfo in classInfoList" :key="classInfo.value" :label="classInfo.label"
                        :value="classInfo.value" />
                </el-select>
                <template v-if="selectedClass">
                    <div style="margin-top:30px">
                        <el-timeline>
                            <el-timeline-item v-for="(activity, index) in activities" :key="index"
                                :timestamp="activity.timestamp">
                                <el-row>
                                    <el-col :span="18">
                                        {{ activity.content }}
                                    </el-col>
                                    <el-col :span="6">
                                        出勤率：{{ activity.attendence }}%
                                    </el-col>
                                </el-row>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </template>
            </el-dialog>
        </el-row>
        <el-row class="row">
            <el-button style="width: 750px;" type="info" size="large" @click="showClassNamelist = true">
                导出班级名单
            </el-button>
            <el-dialog v-model="showClassNamelist" width="1000" title="班级名单">
                <el-select placeholder="请选择班级" v-model="selectedClass">
                    <el-option v-for="classInfo in classInfoList" :key="classInfo.value" :label="classInfo.label"
                        :value="classInfo.value" />
                </el-select>
                <template v-if="selectedClass">
                    <div style="margin:30px 0">
                        <el-table :data="classData" border style="width: 100%">
                            <el-table-column prop="name" label="姓名" />
                            <el-table-column prop="integral" label="积分" />
                        </el-table>
                    </div>
                    <el-button type="primary">
                        导出
                    </el-button>
                </template>
            </el-dialog>
        </el-row>
        <el-row class="row">
            <el-button style="width: 750px;" type="danger" size="large">
                增删班级人员
            </el-button>
        </el-row>
        <el-row class="row">
            <el-button style="width: 750px;" type="success" size="large">
                创建新的班级
            </el-button>
        </el-row>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const showClassAttendance = ref(false)
const showClassNamelist = ref(false)
const selectedClass = ref()
const classInfoList = [
    {
        value: '计算机技术与科学1班',
        label: '计算机技术与科学1班',
    },
    {
        value: "计算机技术与科学2班",
        label: "计算机技术与科学2班",
    },
    {
        value: "软件工程1班",
        label: "软件工程1班",
    },
    {
        value: "软件工程2班",
        label: "软件工程2班",
    },
]

const activities = [
    {
        content: "面向对象程序设计",
        timestamp: "2024-4-15",
        attendence: 83.3,
    },
    {
        content: "设计模式",
        timestamp: "2024-4-13",
        attendence: 90.3,
    },
    {
        content: "软件需求分析",
        timestamp: "2024-4-11",
        attendence: 91.2,
    }
]

const classData = [
    {
        name: "张三",
        integral: 120,
    },
    {
        name: "李四",
        integral: 110,
    },
    {
        name: "王五",
        integral: 130,
    },
]
</script>

<style scoped>
.container {
    padding: 20px 250px;
}

.row {
    margin-top: 50px;
}
</style>